<template>
	<view class="content">
	<view class="main">
		<navgatsVue :navigationMsg="navigationMsg"></navgatsVue>
		<view class="top_sans"></view>
		<view class="curd_tops">
			<view class="curd_tops_images">
				<image src="/static/订单 (3).png" style="width: 100%;height: 100%;" mode=""></image>
			</view>
			<view class="curd_tops_title">
				<p>根据综合信用评估</p>
				<p>本次平台将为您减免押金</p>
			</view>
			<view class="curd_tops_titletwo">
				<p><span>8999.00</span>元</p>
			</view>
			<view class="curd_center_huis">
				<view class="curd_center_huisleft">
					<p>租借物品</p>
					<p>商品押金</p>
					<p>需支付押金</p>
				</view>
				<view class="curd_center_huisright">
					<p>iphone14promax</p>
					<p>￥8999.00</p>
					<p><span style="background-color:rgba(84, 149, 246, 0.5) ;color:#5495F6;border-radius: 10rpx;margin-right: 20rpx;">需支付</span> ￥0.00</p>
				</view>
			</view>
			<view class="curd_center_zf">
				<view class="curd_center_huisleft">
					<p>支付方式</p>
					
				</view>
				<view class="curd_center_huisright" style="display: flex;">
				<image src="/static/支付平台-支付宝.png" style="width: 70rpx;height: 60rpx;margin-left: 50rpx;margin-top: 20rpx;" mode=""></image>	<p style="color: black;">支付宝支付</p>
					
				</view>
			</view>
			<view class="curd_btm_sm">
				<p style="font-size: 30rpx;line-height: 50rpx;">服务说明：</p>
				<p style="color: #9B9D9D ;line-height: 50rpx;">1 本次押金减免结果均为初步评估，实际将以商家最终审核</p>
				<p style="color: #9B9D9D ;line-height: 50rpx;">2 服务过程中，用户需按时主动交付实际每期租金；</p>
				<p style="color: #9B9D9D ;line-height: 50rpx;">3 实付/冻结费用（如有）将于订单去取消或完结后3个工作
日内退回。</p>
			</view>
			<view class="ponstion_btn">
				<u-button text="支付押金" style="background-color: #FCD748;border-radius: 50rpx;border: none;"></u-button>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import navgatsVue from '../../../common/navgats/navgats.vue';
	export default {
		data() {
			return {
				navigationMsg: {
					title: "押金评估结果",
					bgColor: "#FBDF47"
				},
			}
		},
		components:{
			navgatsVue
		},
		methods: {
			
		}
	}
</script>

<style>
	*{
		font-size: 3vw;
		
	}
.content{
		width: 100vw;
		height: 100vh;
		/* position: absolute; */
		background-color: #F6F6F6;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		overflow-y: auto;
	}
	.main{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 1;
		background:linear-gradient(#FBDF47, #FBDF47,#F9F9F9 50%); ;
	}
	.top_sans{
		position: absolute;
		top: 220rpx;
		z-index: 0;
		width: 250rpx;
		height: 250rpx;
		transform: rotate(45deg);
		/* margin-top: 40rpx; */
		background-color: #ffffff;
		
		border-radius: 50rpx;
		
		/* border-top: 50px solid skyblue; */
		    /* border-right: 50px solid transparent; */
		    /* border-left: 50px solid transparent; */
	}
	.curd_tops{
		width: 90%;
		height: 85vh;
		background-color: #ffffff;
		border-radius: 20rpx;
		z-index: 1;
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}
	.curd_tops_images{
		width: 30%;
		height: 200rpx;
		margin-top: 50rpx;
	}
	.curd_tops_title{
		width: 50%;
		height: 100rpx;
		text-align: center;
		line-height: 50rpx;
		color:#776B7F ;
	}
	.curd_tops_titletwo{
		width: 50%;
		height: 100rpx;
		text-align: center;
		
		
	}
	.curd_tops_titletwo p span{
		font-size: 50rpx;
		text-decoration: line-through
	}
	.curd_center_huis{
		width: 90%;
		height: 300rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #F9F9F9;
		display: flex;
	}
	.curd_center_huisleft{
		width: 50%;
		height: 100%;
	}
	.curd_center_huisleft p{
	line-height: 100rpx;
	margin-left: 30rpx;
	font-size: 30rpx;
	color:#999999;
	}
	.curd_center_huisright{
		width: 50%;
		height: 100%;
	}
	.curd_center_huisright p{
	line-height: 100rpx;
	/* margin-left: 30rpx; */
	font-size: 30rpx;
	color:#999999;
	text-align: right;
	margin-right: 30rpx;
	}
	.curd_center_zf{
		width: 90%;
		height: 100rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #F9F9F9;
		display: flex;
		margin-top: 20rpx;
	}
	.curd_btm_sm{
		width: 90%;
		height: 300rpx;
		margin-top: 20rpx;
	}
	.ponstion_btn{
		position: absolute;
		width: 90%;
		height: 100rpx;
		bottom: 0;
	}
</style>
